<template>
	<syeContainerH5 :label="'消防设施操作员中级技能操作在线考核虚拟仿真系统'" showBack withoutTop="true">
		<template v-slot:titRight>
			<text style="font-size: 4vh;">剩余时间{{leftTime}}</text>
		</template>
		<template v-slot:content>
			<view class="warp">
				<scroll-view class="selectList" scroll-y="true" @scrolltolower="nextPage" lower-threshold="10"
					ref="scrollView">

					<view class="">
						总得分：{{allScore}}
					</view>
					<u-grid :gutter="20">
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('1')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">1.火灾报警控制器（联动型）手动自动状态切换</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 2分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2.5分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status1?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status1"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('2')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">2.现场消防设备工作状态判断</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2.5分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status2?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status2"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('3')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">3.总线式消防联动控制器的手动操作</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 2分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：3分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status3?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status3"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>

						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('4')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">4.消防联动控制器直接手动控制单元操作</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 2分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：3分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status4?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status4"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('5')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">5.自动喷水灭火系统电气控制柜操作</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：3分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status5?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status5"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('6')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">6.消防应急广播操作</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 3分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：3分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status6?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status6"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('7')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">7.防烟排烟系统操作</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 6分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：6分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status7?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status7"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('8')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">8.火灾自动报警系统联动功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 3分30秒
											</view>
										</view>
										<view class="score">
											<text>总分值：3分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status8?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status8"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>

						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('9')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">9.湿式、干式自动喷水灭火系统工作压力和流量测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status9?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status9"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('10')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">10.湿式、干式自动喷水灭火系统连锁控制和联动功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 6分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：4分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status10?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status10"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('11')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">11.末端配电装置检查和供电功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status11?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status11"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('12')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">12.消防应急广播系统组件检查和广播、联动功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status12?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status12"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('13')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">13.消防电话系统组件检查和通话功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status13?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status13"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('14')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">14.消防电梯检查和功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status14?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status14"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('15')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">15.消防应急照明和疏散指示系统组件检查和功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分30秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status15?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status15"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('16')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">16.防火门、防火卷帘等防火分隔设施的检查和功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 6分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status16?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status16"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('17')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">17.消防供水设施的检查和功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 5分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：2分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status17?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status17"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('18')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">18.消火栓系统的检查和功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 7分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：1分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status18?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status18"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :span="8">
							<view class="singleCard" @click="toJkInfo('19')">
								<view class="singleTit">
									<!--van-tag color="#E70012">单选题</van-tag--><text class="label"
										style="">19.防排烟系统组件的检查和功能测试</text>
								</view>
								<view class="timeAndScore">
									<view class="leftSta">
										<view class="timeLong">
											<view class="timeLine">
												<image src="../../../static/images/icon/icon-clock.png" mode=""
													style="width:12px;height:12px"></image>时长: 7分00秒
											</view>
										</view>
										<view class="score">
											<text>总分值：3分</text>
										</view>
									</view>
									<view class="rightImage">
										<image :src="status19?picUrl+'beAsk.png':picUrl+'dontAsk.png'" ref="status19"
											mode="widthFix" style="width:100%;"></image>
									</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
					<view class="" style="display: flex;align-items: center;justify-content: center;">
						<u-button type="default" @click="handleExam" block size="mini">交卷</u-button>
					</view>
				</scroll-view>
			</view>
		</template>
	</syeContainerH5>
</template>

<script>
	import syeContainerH5 from '@/components/sysContainerH5/sysContainerH5.vue'
	import {
		fzAnswer,
		upFzAnswer
	} from '@/globalApi/requestApi.js'
	const app = getApp()
	export default {
		components: {
			syeContainerH5
		},
		data() {
			return {
				gridNum: null,
				status1: false,
				status2: false,
				status3: false,
				status4: false,
				status5: false,
				status6: false,
				status7: false,
				status8: false,
				status9: false,
				status10: false,
				status11: false,
				status12: false,
				status13: false,
				status14: false,
				status15: false,
				status16: false,
				status17: false,
				status18: false,
				status19: false,
				leftTime: '00:00:00',
				examId: '',
				testTimeHour: 6000 * 1000,
				examType: 2,
				waitChangeStatus: null,
				picUrl: app.globalData.imgUrl,
				allScore: 0,
			}
		},
		onLoad(options) {
			let that = this
			// plus.screen.lockOrientation('landscape-primary')

			if (options.type == 1) {
				this.examType = 1
			} else {
				this.examType = 2
			}
			that.examType = options.type
			uni.getSystemInfo({
				success: function(res) {
					if ((res.windowWidth - 44) <= 4 * 206) {
						that.gridNum = 8
					} else {
						that.gridNum = 6
					}

				},
			})
			this.startExam()

		},
		onShow() {
			let that = this
			if (this.waitChangeStatus) {
				console.log(this.$refs[this.waitChangeStatus])
			}
			if (!this.timer) {
				this.timer = setInterval(function() {
					that.testTimeHour -= 1000
					if (that.testTimeHour >= 1000) {
						that.leftTime = that.timeLeftFun()
					} else {
						clearInterval(that.timer)
						that.timer = null
					}
				}, 1000)
			}
		},
		onBackPress(e) {
			uni.redirectTo({
				url: '/pages/returnPage/returnPage'
			})
			return true //表示禁止默认返回
		},
		methods: {
			addScore(score) {
				this.allScore += Number(score)
			},
			getValue(data) {
				// this.$refs['status'+data].src="../../../static/images/beAsk.png"
				console.log(1)
				this.waitChangeStatus = 'status' + data
			},
			handleExam() {
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
					
							upFzAnswer({
								id: that.examId,
					
							}).then(res => {
								if (that.examType == 1) {
									that.$showModal2({
										title: '您本次练习完成，请继续努力哦！！',
										icon: 'none',
										confirmText: "确认", // 确认按钮的文字  
										showCancel: false,
										
									}).then(()=>{
										
											uni.switchTab({
												url: '/pages/tabbar/testAndPro'
											})
										
									})
								} else {
									that.$showModal2({
										title: '您本次模拟考试完成，考试分数为' + that.allScore + '分！',
										icon: 'none',
										confirmText: "确认", // 确认按钮的文字  
										showCancel: false,
										
									}).then(()=>{
										
											uni.switchTab({
												url: '/pages/tabbar/testAndPro'
											})
										
									})
								}
					
							})
						
				});
			},
			timeLeftFun() {
				var h = Math.floor(this.testTimeHour / (1000 * 60 * 60) % 24).toString().padStart(2, '0'), //计算小时数
					m = Math.floor(this.testTimeHour / (1000 * 60) % 60).toString().padStart(2, '0'), //计算分钟数
					s = Math.floor(this.testTimeHour / 1000 % 60).toString().padStart(2, '0');
				return h + ':' + m + ':' + s



			},
			startExam() {
				fzAnswer({
					name: '中级消防维保方向',
					cate_id: 2,
					item_number: 19
				}).then(res => {
					this.examId = res.data
				})
			},
			nextPage() {

			},
			toJkInfo(id) {
				var pageName = "A";
				if (id == 2) {
					pageName = "B";
				}
				if (id == 3) {
					pageName = "C";
				}
				if (id == 4) {
					pageName = "D";
				}
				if (id == 5) {
					pageName = "E";
				}
				if (id == 6) {
					pageName = "F";
				}
				if (id == 7) {
					pageName = "G";
				}
				if (id == 8) {
					pageName = "H";
				}
				if (id == 9) {
					pageName = "I";
				}
				if (id == 10) {
					pageName = "J";
				}
				if (id == 11) {
					pageName = "K";
				}
				if (id == 12) {
					pageName = "L";
				}
				if (id == 13) {
					pageName = "M";
				}
				if (id == 14) {
					pageName = "N";
				}
				if (id == 15) {
					pageName = "O";
				}
				if (id == 16) {
					pageName = "P";
				}
				if (id == 17) {
					pageName = "Q";
				}
				if (id == 18) {
					pageName = "R";
				}
				if (id == 19) {
					pageName = "S";
				}

				if (!this['status' + id]) {
					uni.navigateTo({
						url: '../../wb/wb' + pageName + '/wb' + pageName + '?id=' + id + '&examId=' + this.examId +
							'&examType=' + this.examType
					})
					// uni.navigateTo({
					// 	url:'../../wb/wb'+pageName+'/wb'+pageName+'?id='+id+'&examId='+this.examId+'&examType='+this.examType
					// })
				}


			},
		}
	}
</script>
<style scoped>
	/deep/ .u-grid-item {
		background: transparent !important;
		height: auto;
	}

	/deep/ .u-grid-item-box {
		padding: 0 5px !important
	}
</style>
<style lang="scss" scoped>
	.headerTit {
		font-size: 16px
	}

	.warp {
		height: 100%;
		background: #E6E6E6;
	}

	.selectList {
		height: 100%;
		padding: 22px;
		box-sizing: border-box;

		.singleCard {
			width: 100%;
			min-width: 180px;
			height: 120px;
			background: #fff;
			border-radius: 16rpx;
			padding: 20px 10px;
			padding-bottom: 0;
			box-sizing: border-box;
			margin-bottom: 22px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;

			.singleTit {
				font-size: 14px;
				font-weight: 400;
				color: #222222;

				.label {
					margin-left: 10px;
					color: #222222
				}
			}

			.timeAndScore {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #666;
				margin-top: 15px;
				width: 100%;

				.leftSta {
					.timeLine {
						display: flex;
						align-items: center;
					}

					.timeLong,
					.score {
						font-size: 12px;
					}

					.timeLong {
						display: flex;
						align-items: center;

					}
				}

				.rightImage {
					width: 60px;
					// height:30px;
				}
			}
		}
	}
</style>